window.onload = function () {
    const tbody = document.querySelector("tbody");

    //#region 发送请求 获取数据 页面渲染
    getScoreList();
    function getScoreList() {
        axios.get("/score/list").then(result => {
            console.log(result);
            const obj = result.data
            //对obj遍历可以使用forin遍历
            let html = ``;
            for (const key in obj) {
                const value = obj[key];//value对应key的值
                // console.log(value);
                html += `
            <tr>
                <th scope="row">${key}</th>
                <td>${value.name}</td>
                <td class="score">${value.score[0]}<input data-batch="1" data-stu_id="${key}" type="text" /></td>
                <td class="score">${value.score[1]}<input data-batch="2" data-stu_id="${key}" type="text" /></td>
                <td class="score">${value.score[2]}<input data-batch="3" data-stu_id="${key}" type="text" /></td>
                <td class="score">${value.score[3]}<input data-batch="4" data-stu_id="${key}" type="text" /></td>
                <td class="score">${value.score[4]}<input data-batch="5" data-stu_id="${key}" type="text" /></td>
            </tr>
               
              `;
            }
            tbody.innerHTML = html;

            
            //给input绑定失去焦点事件
            inputEvents();
        })
    }
    //#endregion

    //#region 双击编辑表格 失去焦点完成编辑
    
    //td双击事件
    tbody.addEventListener("dblclick",function(event) {
        //判断当前td是不是我们点击的
        if (event.target.nodeName==='TD' && event.target.className==='score') {
            const td = event.target;

            const input = td.querySelector("input");
            input.style.display = "block";
            //让input标签显示td内容
            input.value = td.innerText;
            //设置输入框自动获取光标的方法
            input.focus();  
        }
    })
    //#endregion

    //#region 获取input标签数组 遍历来绑定失去焦点事件
    function inputEvents() {
        // tbody不是输入框，没有失去焦点事件
        const inputList = document.querySelectorAll("input");
        inputList.forEach(input=>{
            input.addEventListener("blur",function() {
                console.log("失去焦点了");
                
                //发送请求  修改真正的业务
                //获取到参数
                //当前学生的id
                //当前的是第几次成绩
                //修改后的成绩是多少
                const {stu_id,batch} = this.dataset;
                const score = this.value;
                axios.post("/score/entry",{stu_id,batch,score}).then(result=>{
                    console.log(result);
                    getScoreList();//异步网络请求 开始发送数据 结果没有那么快返回
                })

            })
        })
    }
    //#endregion

}